<!DOCTYPE html>
<html style="width:100%;height:100%;">
<head lang="en">
    <meta charset="UTF-8">
    <title>微信用户分析</title>
    <link type="text/css" rel="stylesheet" href="/resources/easyui/themes/default/easyui.css">
    <link type="text/css" rel="stylesheet" href="/resources/easyui/themes/color.css">
    <link type="text/css" rel="stylesheet" href="/resources/easyui/themes/icon.css">
    <style type="text/css">
        table.gridtable {
            font-family: verdana,arial,sans-serif;
            font-size:11px;
            color:#333333;
            border-width: 1px;
            border-color: #cccccc;
            border-collapse: collapse;
        }
        table.gridtable td {
            border-width: 1px;
            padding: 15px;
            border-style: solid;
            border-color: #cccccc;
            background-color: #ffffff;
        }
    </style>
    <script type="text/javascript" src="/resources/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/resources/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/resources/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="/resources/easyui/plugin/jquery.cookie.js"></script>
    <script type="text/javascript" src="/resources/js/Util.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var pageSize = $.cookie("pageSize");
            $.cookie("pageNo", 1, {expires:1});
            if(!pageSize) {
                $.cookie("pageSize", 10, {expires:1});
            }
            analyseUser($.cookie("appId"), true);
            //分页操作
            var pager = $('#theList').datagrid('getPager');
            if(pager){
                $(pager).pagination({
                    onSelectPage:function(pageNumber, pageSize){
                        $.cookie("pageNo", pageNumber, {expires:1});
                        loadTheList(pageSize, pageNumber, null, $('#searchForm').serialize());
                    },
                    onRefresh:function(pageNumber, pageSize){
                        loadTheList(pageSize, pageNumber, null, $('#searchForm').serialize());
                    },
                    onChangePageSize:function(pageSize){
                        $.cookie("pageSize", pageSize, {expires:1});
                        loadTheList(pageSize, 1, null, $('#searchForm').serialize());
                    }
                })
            }
        });

        function analyseUser(appId, isFirst) {
            var postDate = '';
            if(appId) {
                postDate = 'appId=' + appId;
            } else {
                postDate = $('#searchForm').serialize();
            }
            if(isFirst) {
                postDate += '&startDate=' + new Date().Format("yyyy-MM-dd");
            } else {
                var start = $('#startDate').datebox('getText');
                var end = $('#endDate').datebox('getText');
                if (start) {
                    postDate += '&startDate=' + start;
                }
                if (end) {
                    postDate += '&endDate=' + end;
                }
            }

            restClient('/rest/wechat/user/analyse', function(data){
                if(data) {
                    if(!isFirst) {
                        $('#analyse').panel('setTitle', data.title);
                    }
                    $('#addCount').html(data.addCount);
                    $('#cancelCount').html(data.cancelCount);
                    $('#focusCount').html(data.focusCount);
                    $('#allFocusCount').html(data.allFocusCount);

                    $('#addCount2').html(data.addCount);
                    $('#newCancelCount').html(data.newCancelCount);
                    $('#newFocusCount').html(data.newFocusCount);

                    $('#oldCount').html(data.oldCount);
                    $('#oldCancelCount').html(data.oldCancelCount);
                }
            }, postDate);

            if(isFirst) {
                loadTheList($.cookie("pageSize"), $.cookie("pageNo"), null, 'appId='+$.cookie("appId"));
            } else {
                loadTheList($.cookie("pageSize"), 1, null, $('#searchForm').serialize());
            }
        }

        function loadTheList(pageSize, pageNo, successFun, condition) {
            var data = 'pageSize='+pageSize+'&pageNo='+pageNo;
            if(condition) {
                data = data + '&' + condition;
            }
            restClient('/rest/wechat/user/analyse/list', function(data){
                $('#theList').datagrid("loadData", data);
                if(successFun) successFun();
            }, data);
        }

        function formatTheDate(value, row, index) {
            if(row.theDate) {
                return new Date(row.theDate).Format("yyyy-MM-dd");
            }
        }
    </script>
</head>
<body onload="isLogon();" style="width:100%;height:100%;margin: 0;">
<div style="margin: 5px;">
    <form id="searchForm">
        AppId: <input class="easyui-combobox" id="appId" name="appId" style="width: 200px;"
                      data-options="valueField:'appId', textField:'description', formatter:formatAppId, editable:false">
        时间: <input id="startDate" class="easyui-datebox" data-options="editable:false,formatter:myformatter">
        至 <input id="endDate" class="easyui-datebox" data-options="editable:false,formatter:myformatter">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" onclick="analyseUser()">分析</a>
    </form>
</div>
<div id="analyse" class="easyui-panel" data-options="title:'今日关键指标'">
    <table class="gridtable" style="margin: 10px;">
        <tr>
            <td style="background-color: #f3f3f3;"><a href="javascript:void(0)" title="指定时间段内所有关注人数" class="easyui-tooltip">新增关注人数</a></td>
            <td style="background-color: #f3f3f3;"><a href="javascript:void(0)" title="指定时间段内关注后又取消关注的人数" class="easyui-tooltip">本系统取消人数</a></td>
            <td style="background-color: #f3f3f3;"><a href="javascript:void(0)" title="指定时间段内原有粉丝取消关注的人数" class="easyui-tooltip">原系统取消人数</a></td>
            <td style="background-color: #f3f3f3;"><a href="javascript:void(0)" title="总计取消人数 = 本系统取消人数 + 原系统取消人数" class="easyui-tooltip">总计取消人数</a></td>
            <td style="background-color: #f3f3f3;"><a href="javascript:void(0)" title="本系统净增人数 = 新增关注人数 - 本系统取消人数" class="easyui-tooltip">本系统净增人数</a></td>
            <td style="background-color: #f3f3f3;"><a href="javascript:void(0)" title="总计净增人数 = 新增关注人数 - 总计取消人数" class="easyui-tooltip">总计净增人数</a></td>
            <td style="background-color: #dddddd;"><a href="javascript:void(0)" title="截止目前为止原有粉丝总人数（可通过修改此项人数进行人数校对）" class="easyui-tooltip">目前上报原有人数</a></td>
            <td style="background-color: #dddddd;"><a href="javascript:void(0)" title="截止目前为止累计关注人数 = 截止目前为止新增关注人数 + 目前上报原有人数 - 截止目前为止原系统取消人数" class="easyui-tooltip">目前累计关注人数</a></td>
        </tr>
        <tr>
            <td id="addCount" style="font-weight: bold; text-align: center;"></td>
            <td id="newCancelCount" style="font-weight: bold; text-align: center;"></td>
            <td id="oldCancelCount" style="font-weight: bold; text-align: center;"></td>
            <td id="cancelCount" style="font-weight: bold; text-align: center;"></td>
            <td id="newFocusCount" style="font-weight: bold; text-align: center;"></td>
            <td id="focusCount" style="font-weight: bold; text-align: center;"></td>
            <td id="oldCount" style="font-weight: bold; text-align: center;"></td>
            <td id="allFocusCount" style="font-weight: bold; text-align: center;"></td>
        </tr>
    </table>
</div>
<div class="easyui-panel" data-options="title:'历史关键指标'">
    <table id="theList" class="easyui-datagrid" pagination="true"
           data-options="pageList:[10,15,20],pageSize:$.cookie('pageSize') ? $.cookie('pageSize') : 10"
           rownumbers="true" fitColumns="true" singleSelect="true">
        <thead>
        <tr>
            <th field="theDate" width="50" data-options="formatter:formatTheDate">时间</th>
            <th field="addCount" width="50">新增关注人数</th>
            <th field="newCancelCount" width="50">本系统取消人数</th>
            <th field="oldCancelCount" width="50">原系统取消人数</th>
            <th field="cancelCount" width="50">总计取消人数</th>
            <th field="newFocusCount" width="50">本系统净增人数</th>
            <th field="focusCount" width="50">总计净增人数</th>
            <th field="oldCount" width="50">目前上报原有人数</th>
            <th field="allFocusCount" width="50">目前累计关注人数</th>
        </tr>
        </thead>
    </table>
</div>

<script type="text/javascript">
    loadAppIdCombobox($('#appId'), true);

    function myformatter(date){
        var y = date.getFullYear();
        var m = date.getMonth()+1;
        var d = date.getDate();
        return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
    }

</script>
</body>
</html>